<template>
  <div class="security-baseline">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">安全基线</span>
        <div class="header-operations">
          <el-input
            v-model="searchQuery"
            placeholder="搜索客户名称/IP"
            prefix-icon="el-icon-search"
            clearable
            size="small"
            style="width: 250px;"
          >
          </el-input>
          <el-button-group class="action-buttons">
            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
            <el-button type="success" size="small" icon="el-icon-download" @click="exportData">导出</el-button>
          </el-button-group>
        </div>
      </div>

      <!-- Statistics Cards -->
      <el-row :gutter="20" class="statistics-row">
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">总检查项</div>
                <div class="statistic-value">{{ statistics.totalChecks }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card risk">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-warning"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">风险项</div>
                <div class="statistic-value">{{ statistics.riskItems }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card safe">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-success"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">安全项</div>
                <div class="statistic-value">{{ statistics.safeItems }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card pending">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-time"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">待检查</div>
                <div class="statistic-value">{{ statistics.pendingChecks }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Main Table -->
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="clientName"
          label="客户名称"
          min-width="180"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="serverIp"
          label="影响服务器"
          min-width="180"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="checkItems"
          label="检查项"
          width="100"
          align="center">
        </el-table-column>

        <el-table-column
          prop="riskStatus"
          label="风险项"
          width="120"
          align="center">
          <template slot-scope="scope">
            <span class="risk-status">{{ scope.row.riskStatus }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="120"
          fixed="right"
          align="center">
          <template slot-scope="scope">
            <el-button
              @click="viewDetails(scope.row)"
              type="text"
              size="small">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- Details Dialog -->
    <el-dialog
      title="基线检查详情"
      :visible.sync="detailsVisible"
      width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="客户名称">{{ selectedRow.clientName }}</el-descriptions-item>
        <el-descriptions-item label="服务器IP">{{ selectedRow.serverIp }}</el-descriptions-item>
        <el-descriptions-item label="检查项">{{ selectedRow.checkItems }}</el-descriptions-item>
        <el-descriptions-item label="风险状态">
          <span class="risk-status">{{ selectedRow.riskStatus }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-table
        :data="selectedRow.details || []"
        style="margin-top: 20px;"
        v-if="selectedRow.details">
        <el-table-column prop="checkItem" label="检查项目" min-width="200"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '通过' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="suggestion" label="建议" min-width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SecurityBaseline',
  data() {
    return {
      searchQuery: '',
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailsVisible: false,
      selectedRow: {},
      statistics: {
        totalChecks: 0,
        riskItems: 0,
        safeItems: 0,
        pendingChecks: 0
      },
      tableData: [
        {
          clientName: '002****75',
          serverIp: '8.140.51.64',
          checkItems: 1,
          riskStatus: '存在风险',
          details: [
            { checkItem: '系统密码策略', status: '未通过', suggestion: '建议加强密码复杂度要求' },
            { checkItem: '系统更新状态', status: '通过', suggestion: '系统已是最新版本' }
          ]
        },
        {
          clientName: '畅捷通****专用',
          serverIp: '121.89.206.20',
          checkItems: 1,
          riskStatus: '存在风险'
        },
        {
          clientName: '多页签****09',
          serverIp: '39.101.204.71',
          checkItems: 1,
          riskStatus: '存在风险'
        }
        // 添加更多示例数据...
      ]
    }
  },
  computed: {
    filteredTableData() {
      if (!this.searchQuery) return this.tableData;
      const query = this.searchQuery.toLowerCase();
      return this.tableData.filter(item =>
        item.clientName.toLowerCase().includes(query) ||
        item.serverIp.toLowerCase().includes(query)
      );
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    viewDetails(row) {
      this.selectedRow = row;
      this.detailsVisible = true;
    },
    refreshData() {
      this.fetchData();
    },
    exportData() {
      this.$message({
        type: 'success',
        message: '正在导出数据...'
      });
    },
    updateStatistics() {
      let stats = {
        totalChecks: 0,
        riskItems: 0,
        safeItems: 0,
        pendingChecks: 0
      };

      this.tableData.forEach(item => {
        stats.totalChecks += item.checkItems;
        if (item.riskStatus === '存在风险') {
          stats.riskItems++;
        } else if (item.riskStatus === '安全') {
          stats.safeItems++;
        } else {
          stats.pendingChecks++;
        }
      });

      this.statistics = stats;
    },
    async fetchData() {
      this.loading = true;
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));
        this.total = this.tableData.length;
        this.updateStatistics();
      } catch (error) {
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<style scoped>
.security-baseline {
  padding: 8px;
}

.box-card {
  margin-bottom: 10px;
}

.header-operations {
  float: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.statistics-row {
  margin-bottom: 20px;
}

.statistic-card {
  height: 100px;
}

.statistic-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.statistic-icon {
  font-size: 32px;
  margin-right: 15px;
  color: #409EFF;
}

.statistic-card.risk .statistic-icon {
  color: #F56C6C;
}

.statistic-card.safe .statistic-icon {
  color: #67C23A;
}

.statistic-card.pending .statistic-icon {
  color: #E6A23C;
}

.statistic-info {
  display: flex;
  flex-direction: column;
}

.statistic-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.risk-status {
  color: #F56C6C;
  font-weight: bold;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .header-operations {
    float: none;
    margin-top: 10px;
    flex-direction: column;
  }

  .header-operations > * {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .statistics-row {
    .el-col {
      margin-bottom: 10px;
    }
  }
}
</style>
